<template>
    <BasePanel width="440px" height="140px" title="美丽杭州元素">
        <template #default>
            <div class="panel-content">
                <div v-for="item in listData" :key="item.label" class="item">
                    <img class="img" :src="item.icon" alt="" />
                    <div class="info-box">
                        <div class="label">{{ item.label }}</div>
                        <div class="value-box">
                            <span class="value">{{ item.value }}</span>
                            <span class="unit">{{ item.unit }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </BasePanel>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel/index.vue'
// import { useGlobalStore } from '@/store/global'
import { getFpiAssetsFile } from '@/utils/tools'

// 全局数据
// const globalStore = useGlobalStore()

// 图片
const img1 = getFpiAssetsFile('global/card-icon-4.png')
const img2 = getFpiAssetsFile('global/card-icon-5.png')
const img3 = getFpiAssetsFile('global/card-icon-6.png')

// 数据
const listData = shallowRef([
    {
        label: '美丽城镇',
        value: 118,
        unit: '条',
        icon: img1,
    },
    {
        label: '美丽乡村',
        value: 1385,
        unit: '个',
        icon: img2,
    },
    {
        label: '绿道',
        value: 4282,
        unit: 'km',
        icon: img3,
    },
])
</script>

<style lang="scss" scoped>
.panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;

        .img {
            width: 48px;
            height: 48px;
        }

        .info-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 12px;

            .label {
                font-size: 18px;
                font-weight: 700;
                line-height: 18px;
                color: rgba(255, 255, 255, 1);
                height: 18px;
            }

            .value-box {
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                gap: 4px;

                .value {
                    font-size: 24px;
                    font-weight: 400;
                    line-height: 24px;
                    color: rgba(1, 254, 133, 1);
                    height: 24px;
                    font-family: Oswald;
                }
                .unit {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 16px;
                    color: rgba(255, 255, 255, 1);
                    height: 16px;
                }
            }
        }
    }
}
</style>
